<template>
	<view class="container">
		<view class="bookDeatil" v-if='getData'>
			<view class="bookImage">
				<uv-image radius="0rpx" :customStyle="customStyle3"  :src="img" width="208rpx" height="292rpx"></uv-image>
			</view>
			<view class="detail">
				<!-- <uv-text class="ellipsis" size="22" :text="getData.bookName"></uv-text> -->
				<p class="ellipsis" style="font-size: 36rpx;">{{getData.bookName}}</p>
				<view class="author">
					<text class="author-title">作者:</text>
					<text class="author-name">{{getData.author}}</text>
				</view>
				<view class="press">
					<text class="author-title">出版社:</text>
					<uv-text color="#86909C" :text="getData.press"></uv-text>
				</view>
				<!-- <view class="publication_time">
					<p style="color: #86909C;min-width: 150rpx;">出版日期:</p>
					<p style="font-size: 25rpx;margin-left: 5%;min-width: 180rpx;">{{getData.publicationTime}}</p>
					<div style="display: flex; justify-content: center; align-items: center;margin-left: auto;">
					    <view style="display: flex; align-items: center;margin-left: auto;">
					        <uv-icon size="18" :name="eye"></uv-icon>
					        <text style="font-size: 12px;color: #86909C;padding-top: 3rpx;min-width: 100rpx;">{{views}}次</text>
					    </view>
					</div>
				</view> -->
			</view>
		</view>
		<!-- <uv-divider class="divider" /> -->
		<!-- 阅读信息 -->
		<!-- <view class="read-message">
			<view class="read-message-item" style="border-right:1px solid #F2F2F4">
				<text>阅读</text>
				<text><text style="font-size:42rpx;color:#4E5969;">{{getData.totalReadCount / 10000 || 0}}</text><text style="font-size:22rpx;color:#4E5969;">万人</text></text>
				<text>{{getData.completeReadCount || 0}}人读完</text>
			</view>
			<view class="read-message-item" style="border-right:1px solid #F2F2F4">
				<text>我的阅读</text>
				<uv-icon name="tags" size="28" :color="sfRead == 1?'#008BFF':''"></uv-icon>
				<text>标记在读</text>
			</view>
			<view class="read-message-item">
				<text>字数</text>
				<text><text style="font-size:42rpx;color:#4E5969;">{{getData.totalWords / 10000|| 0}}</text><text style="font-size:22rpx;color:#4E5969;">万字</text></text>
				<text>{{getData.publishTime?.split(' ')[0]||''}}出版</text>
			</view>
		</view> -->
		<!-- 评分 -->
		<uni-card>
			<ratebox :ratedata="comment"></ratebox>
		</uni-card>
		<!-- 内容 -->
		<uni-card style="margin:0;" v-if="getData">
			<view :class="showall?'text':'text textall'">
				<text v-if="getData.briefIntroduction">{{getData.briefIntroduction}}</text>
				<uv-empty v-else mode="data"></uv-empty>
			</view>
			<view v-if="getData.briefIntroduction && getData.briefIntroduction.length > 100" class='showHidden'>
				<view v-if="showall" @click="changeshowall">
					<text class="showHidden-text">收起阅读</text>
					<uv-icon name="arrow-down" color="#4E5969" size="16"></uv-icon>
				</view>
				<view v-else @click="changeshowall">
					<text class="showHidden-text">展开阅读</text>
					<uv-icon name="arrow-up" color="#4E5969" size="16"></uv-icon>
				</view>
			</view>
		</uni-card>
		<uv-divider class="divider" />
		<view class="like">
			<view class="title">
				猜你喜欢
			</view>
			<view class="image-container">
				<view class="image-item" v-for="(xx,index) in top" :key="index">
					<image style="width: 208rpx;height: 292rpx;margin-right: 20rpx;" @click="tiaoTos(xx)" :src="xx.cover"></image>
					<view style="max-height: 110px;overflow: hidden;">
						<text class="image-text">{{name(xx.resourceName)}}</text>
					</view>
					
				</view>
			</view>
		</view>
		<view class="read_button">
			<uv-row gutter="10">
				<uv-col span="6">
					<uv-button :custom-style="customStyle" size="large" @click="look" text="开始阅读"
						type="primary"></uv-button>
				</uv-col>
				<uv-col span="6">
					<uv-button @click="stars" v-if="!data.stars" :custom-style="customStyle2" :icon="staring"
						size="large" text="收藏"></uv-button>
					<uv-button v-else @click="stars" :custom-style="customStyle2" :icon="unstaring" size="large"
						text="收藏"></uv-button>
				</uv-col>
			</uv-row>
		</view>
	</view>
</template>

<script setup>
	import ratebox from '@/components/rate/rate.vue'
	import {
		ref,
		computed,
		reactive,
		onMounted
	} from 'vue';
	import useGetGlobalProperties from '@/util/useGlobal.js'
	// import { lzEpub } from 'lzEpub'

	import Request from '@/js_sdk/luch-request/luch-request/index.js' // 下载的插件
	import {
		onLoad
	} from '@dcloudio/uni-app'
	onLoad((option) => {
		if (option.q) {
					let params = decodeURIComponent(option.q)
					let arry = params.split('?');
					let scene = arry[1].split('=');
					getData.value = scene[1];
				}
				if (option.id) {
					console.log(option.id);
					getData.value = option.id;
					console.log(getData.value);
				}
	});
	onMounted(() => {
		init(getData.value)
		getTop()
	});
	const customStyle3 = ref({
			boxShadow: '2px 2px 5px rgba(0, 0, 0.2, 0.5)'
		});
	const http = new Request();
	const url = useGetGlobalProperties().$httpUrl;

	// const sta = url+'/about.png';
	const urls = useGetGlobalProperties().$https;
	const urlwx = useGetGlobalProperties().$httpUrlWx;
	const staring = urlwx + '/star.png'
	const unstaring = urlwx + '/unstar.png'
	const eye = url + '/eye.png'
	const img = ref();
	const getData = ref();
	const comment = ref()
	const top = ref();
	const views = ref();
	const resourseId = ref();
	const showall = ref(false)
	const changeshowall = ()=>{
		showall.value = !showall.value
	}
	const show = ()=>{
		
	}
	
	const name = (e)=>{
		return e.substring(0,8)
	}
	const look = () => {
			uni.navigateTo({
				// url:'/pages/index/bookMiddle/bookMiddle?id=' + getData.value.resourceId
				url:'/pages/index/bookMiddle/bookMiddle?id=' + getData.value.id
			})
		// if(files.value.type=='epub'){
		// // if(!true){
		// 	// uni.navigateTo({
		// 	//       url: '/pages/index/webview/webview?url=' +encodeURIComponent('https://zhongtai.zhongjiaoyuntu.com:9002/dzyx/%E7%9B%9B%E5%A4%8F/%E7%9B%9B%E5%A4%8F.html')
		// 	//     });
			
			
		// 	// console.log('fileUrl.value',fileUrl.value)
		// 	uni.setStorageSync('bookFileUrl',fileUrl.value)
		// 	uni.navigateTo({
		// 		// url:'/pages/index/bookMiddle/bookMiddle?id=' + getData.value.resourceId
		// 		url:'/pages/index/bookMiddle/bookMiddle?id=' + getData.value.id
		// 	})
		// }else{
		// 	let code = '';
		// 	uni.showLoading({
		// 		title:'正在加载中'
		// 	})
		// 	uni.login({
		// 		provider: 'weixin',
		// 		onlyAuthorize: true,
		// 		success: res => {
		// 			console.log(res, '登录成功')
		// 			code = res.code;
		// 			console.log("code=" + res.code);
		// 			uni.request({
		// 				// url:  'https://weixin.shuzinongyue.com:8942/userInfo/getOpenId/' + code,
		// 				url:  'http://61.163.243.13:8944/userInfo/getOpenId/' + code,
		// 				url:  'https://wechat.shuzinongyue.com:8922/userInfo/getOpenId/' + code,
		// 				method: 'GET',
		// 				success: (res) => {
		// 					if (res.data.data) {
		// 						console.log('res.data.look', res.data.data)
		// 						console.log('fileUrl.value',fileUrl.value)
		// 						uni.setStorageSync('userInfo', res.data.data);
		// 						wx.downloadFile({
		// 							url: fileUrl.value,
		// 							success: function(res) {
		// 								console.log('res', res);
		// 								var filePath = res.tempFilePath;
		// 								wx.openDocument({
		// 									filePath: filePath,
		// 									fileType: 'pdf',
		// 									showMenu: true,
		// 									success: function(res) {
		// 										uni.hideLoading()
		// 										console.log('打开文档成功');
		// 									}
		// 								});
		// 							}
		// 						});
		// 						return;
		// 					} else {
		// 						uni.showToast({
		// 							title: '请登录后进行阅读',
		// 							icon: 'success',
		// 							duration: 1500,
		// 							mask: false
		// 						});
		// 						uni.redirectTo({
		// 							// url: '/pages/admin/login'
		// 						})
		// 					}
		// 				}
		// 			})
		// 		}
		// 	})
		// }
		
		// let option={
		// 	url:'https://zhongtai.zhongjiaoyuntu.com:8448/digitallibrary/bookExposure/lengleng/Book/中国矿业大学（北京）地球科学与测绘工程学院《841土地管理学》历年考研真题及详解/中国矿业大学（北京）地球科学与测绘工程学院《841土地管理学》历年考研真题及详解.epub'
		// }

		// uni.navigateTo({
		// 	url:'/pages/pdfviewer/index'
		// })
		// uni.showLoading({
		// 	title: '正在加载中'
		// })
		

		// return;

	}
	const tiaoTos = (e) => {
		console.log(e)
		uni.navigateTo({
			url:'/pages/index/bookDetail/bookDetail?id='+e.resourceId
		})
	}
	const fileUrl = ref();
	const files = ref();
	const init = (e) => {
		let user = uni.getStorageSync('userInfo');
		// uni.showLoading({
		// 	'title': '正在加载中'
		// })
		resourseId.value = e;
		http.get('/homepage/' + e, {}).then(
		// http.get('/ruralLibrary/resource/getProductResourcesDetails/' + e, {}).then(
			res => {
				getData.value = res.data.data.data;
				comment.value = res.data.data
				// getData.value = res.data.data;
				views.value = res.data.data.pageView;
				img.value = getData.value.coverPictures[0].coverPictureUrl;
				fileUrl.value = getData.value.file[0].fileUrl
				files.value = getData.value.file[0]
				// img.value = getData.value.cover;
				// console.log('data.vale', getData.value)
				// console.log('img.value', img.value)
				// console.log('fileUrl.value.value', fileUrl.value)
				uni.hideLoading();
			})
			// http.get('/wxApi/collect/getCollect/'+user.openId+'/' + e, {}).then(
			// 	res => {
			// 		console.log('getCollect',res)
			// 		data.stars = res.data==0? true:false;
			// 	})
	}
	const getTop = (e) => {
		const book = uni.getStorageSync('book')
		http.get('/ruralLibrary/resource/books/' + book, {}).then(
			st => {
				console.log('tops', st.data.data[0].bookTop)
				top.value = st.data.data[0].bookTop.splice(0, 3);
				console.log('top', top.value)
			})
	}
	const data = reactive({
		list: [{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper1.png',
				name: '三国演义'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper2.png',
				name: '水浒传'
			},
			{
				url: 'https://cdn.uviewui.com/uview/swiper/swiper3.png',
				name: '西游记'
			}
		],
		categoty: [
			'电子书',
			'有声图书',
			'报纸'
		],
		stars: true
	});
	const toRead = () => {
		// uni.navigateTo({
		// 	url:'/pages/pdfviewer/index',
		// 	title:'ccc'
		// })

		uni.navigateTo({
			url: '/pages/readBook/readBook',
			title: 'ccc'
		})
		// uni.navigateToWebview({
		//   url: 'https://view.xdocin.com/view?src=' + encodeURIComponent('http://61.163.243.7:9999/digitallibrary/bookExposure/lengleng/Book/《维洛那二绅士》/《维洛那二绅士》.epub')
		// });
		// uni.openDocument({
		// 	filePath:'https://view.xdocin.com/view?src=' + encodeURIComponent('http://61.163.243.7:9999/digitallibrary/bookExposure/lengleng/Book/《维洛那二绅士》/《维洛那二绅士》.epub'),
		// 	showMenu: true,
		// 	success: function(res) {
		// 		console.log('打开文档成功');
		// 	}
		// });
		// console.log('走到了')
	}
	const selectObj = ref([]);
	const stars = async () => {
		let user = uni.getStorageSync('userInfo');
		let code = '';
		const book = uni.getStorageSync('book');
		data.stars = data.stars == false ? true : false;
		if (data.stars == false) {
			uni.showToast({
				title: '收藏成功!',
				icon: 'success',
				duration: 1500,
				mask: false
			});
			uni.request({
				url: urls + '/wxApi/collect/add',
				method: 'POST',
				data: {
					openId: user.openId,
					resourceId: resourseId.value,
					dataTypeId: book
				},
				success: (res) => {
					console.log('start', res.data)
				}
			})
			return;
		} else if (data.stars == true) {
			uni.showToast({
				title: '已取消收藏!',
				icon: 'success',
				duration: 1500,
				mask: false
			});
			selectObj.value.push(resourseId.value);
			uni.request({
				url: urls + '/wxApi/collect/remove/'+resourseId.value,
				method: 'GET',
				success: (res) => {
					console.log('start', res.data)
				}
			})

		}


	}
	const customStyle = ref({
		height: '95rpx',
		background: '#3c9cff',
		color: '#fff',
		borderRadius: '10rpx',
		boxShadow: "0rpx 4rpx 25rpx 0rpx rgba(0,139,255,0.5)"
	});
	const customStyle2 = ref({
		with:'208rpx',
		height:'30rem',
		border: 'none',
		height: '100rpx',
		background: '#F6F7F9',
		color: '#475054',
		borderRadius: '10rpx'
	});
</script>

<style>
	.ellipsis {
		max-width: 55vw;
		height: 40rpx;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.author .rit_author {
		padding: 0;
		margin-right: 40% !important;
	}

	.image-container {
		display: flex;
		flex-wrap: wrap;
		margin-top: 10rpx;
	}

	.image-item {
		max-width: 33.33%;
	
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.image-text {
		margin-top: 6px;
		font-size: 25rpx;
		 display: -webkit-box; /* 将文本视为一个弹性伸缩盒子 */
		  -webkit-line-clamp:1; /* 设置显示的行数为五行 */
		  -webkit-box-orient: vertical; /* 文本的排列方向为垂直方向 */
		  line-height: 1.2; /* 行高 */
		  overflow: hidden;
		  text-overflow: ellipsis;
	}

	.like {
		margin-left: 30.1rpx;
		font-size: 32rpx;
	}

	.divider {
		padding: 0 40rpx;
		margin-right: 20rpx;
	}
	.uni-card{
		margin:30rpx!important;
		border-radius:18rpx!important;
		padding:0 10rpx!important;
	}
	.text {
		/* padding-top: 15rpx;
		padding-right: 60rpx;
		padding-left: 40rpx; */
		text-align: justify;
		/* 设置为两端对齐 */
		line-height: 60rpx;
		text-indent: 2em;
		/* 在每一行的开头都添加两个空格的缩进 */
		color: #4E5969;
		font-size: 31rpx;
		padding-bottom:30rpx;
	}
	.textall text{
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 4;
		line-clamp: 3;
		-webkit-box-orient: vertical;
	}
	.showHidden{
		width:100%;
		height:60rpx;
		display:flex;
		justify-content: center;
		color:#999999;
	}
	.showHidden .uv-icon{
		width:50rpx;
	}
	.showHidden-text{
		font-size:28rpx;
		font-weight:normal;
		color:#4E5969;
	}
	.showHidden view{
		width:85%;
		height:100%;
		border-radius:60rpx;
		background:#F4F5F7;
		display:flex;
		justify-content: center;
		align-items: center;
	}

	.collect {
		background-color: lawngreen;
		color: black;
	}

	.read_button {
		width:100%;
		height:140rpx;
		padding:20rpx;
		box-sizing: border-box;
		background:#ffffff!important;
		position:fixed;
		left:0;
		bottom:0;
	}

	.reading_times {
		display: flex;
	}

	.publication_time {
		display: flex;
		align-items: center;
		position: relative;
		top: 76rpx;
	}

	.press {
		display: flex;
		position: relative;
		top: 30rpx;
	}

	.detail {
		padding: 16rpx 0;
		margin-left: 13rpx;
		display:flex;
		flex-direction: column;
		justify-content: space-around;
	}

	.author {
		display: flex;
		margin-top: 20rpx;
		margin-left: 5rpx;
	}

	.bookDeatil {
		display: flex;
		/* 使用 Flex 布局 */
		margin-left: 30rpx;
	}
	.author-title{
		 color: #86909C;
		 display:inline-block;
		 width:120rpx;
	}
	.author-name{
		color: #008BFF;
		font-size: 29rpx;
		margin-top: 3%;
		line-height:30rpx;
	}

	.bookImage {
		margin-right: 10px;
		/* 可根据需要调整图片和文字之间的间距 */
	}

	.container {
		position: relative;
		top: 100rpx;
		bottom: 200rpx;
		font-family: my-font;
		padding-bottom: 30rpx;
		line-height: 24px;
		padding-bottom:80rpx;
	}
	.read-message{
		display:flex;
		justify-content: space-between;
		border-top:1px solid #F2F2F4;
		margin-top:50rpx;
		margin-bottom:40rpx;
		padding-top:30rpx;
		padding: 30rpx 20rpx 0;
	}
	.read-message-item{
		width:33.3%;
		display:flex;
		flex-direction: column;
		align-items: center;
		justify-content: space-between;
		font-size:24rpx;
		color:#86909C;
	}
</style>